<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <style>
        #test{width: 200px;height: 100px;border: 1px solid green;display: none;}
        #img{width: 50px;height: 50px;display: none;}
        #upimg{text-align: center;font: 8px/10px '微软雅黑','黑体',sans-serif;width: 300px;height: 10px;border: 1px solid green;}
        #load{width: 0%;height: 100%;background: green;text-align: center;}
    </style>
</head>
<body>

<form enctype="multipart/form-data" action="/bigfile/index/upload" method="post">
    <div id="upimg"><div id="load"></div></div>
    <input type="file" name="mof" multiple="multiple"/>
    <input type="button" value="uploadfile" onclick="upfile();" />
</form>
<div id="test">测试是否DIV消失</div>

<script type="text/javascript">
    const LENGTH = 10*1024*1024;
    var dom = document.getElementsByTagName('form')[0];
    dom.onsubmit = function(){}
    var fd;
    var xhr = new XMLHttpRequest();
    var des = document.getElementById('load');
    var num = document.getElementById('upimg');
    var file;
    var start;
    var end;
    var blob;
    var pecent;
    var filename;

    function upfile(){
        start = 0;
        end   = LENGTH+start;
        file  = document.getElementsByName('mof')[0].files[0];
        if(!file){
            alert('请选择文件');
            return;
        }
        up();
    }

    function up(){
        if(start < file.size){
            xhr.open('POST', '/bigfile/index/upload', true);
            xhr.onreadystatechange = function(){
                if(this.readyState == 4){
                    if(this.status >= 200&&this.status<300){
                        if(this.responseText.indexOf('failed') >= 0){
                            alert('文件发送失败，请重新发送');
                            des.style.width='0%';
                        }else{
                            start = end;
                            end   = start+LENGTH;
                            setTimeout('up()',1000);
                        }
                    }
                }
            }
            xhr.upload.onprogress = function(ev){
                if(ev.lengthComputable){
                    pecent = 100*(ev.loaded+start)/file.size;
                    if(pecent > 100){
                        pecent = 100;
                    }
                    des.style.width = pecent+'%';
                    des.innerHTML   = parseInt(pecent)+'%'
                }
            }
            //分割文件核心部分slice
            blob = file.slice(start,end);
            fd   = new FormData();
            fd.append('tmp',  blob);
            fd.append('name', file.name);
            xhr.send(fd);
        }else{
           console.log('传输完毕')
        }
    }

    function change(){
        des.style.width='0%';
    }
</script>

</body>
</html>